<template>
	<view class="wapper">

		<view class="top-conetnt">
			<view class="status-bar">

			</view>
			<view class="hei" style="height: 20rpx;">

			</view>
			<view class="search ss-flex">
				<!-- <view class="left">
					推荐
				</view> -->
				<u-icon name="arrow-left" size="40rpx" style="margin-right: 20rpx;" @tap="LC.$router.back()"></u-icon>
				
				<u-search :showAction="true" v-model="state.keyword" @search="search" @custom="search" actionText="搜索" :animation="true"></u-search>
			</view>
			
			<view class="bot-content">
				
				<u-tabs :list="state.data.category" v-if="state.data.category.length" lineWidth="40rpx"
					lineColor="#FF5353" :activeStyle="{
				               color: '#453C3C',
				               fontWeight: '600',
				              
				           }" :inactiveStyle="{
				              color: '#3F3B3B',
				              fontWeight: '300',
				              
				           }"  itemStyle="padding-left: 15rpx; padding-right: 15rpx; height:88rpx;"
					@change="changetab"></u-tabs>
				
				<view class="tablist ss-flex ">
					<view class="tab " v-for="(item,i) in list3" :class="{active:i===state.tabindex1}" @tap="changetab1(i)">
						{{item.name}}
					</view>
				
				</view>
				<view class="wzlist">
					<u-empty
					v-if="state.datalist.length<1"
					        
					       
					>
					</u-empty>
					<view class="wzitem" v-for="item in state.datalist" @tap="LC.$router.go('/pages/index/pageDetail?id='+item.id)">
						<image :src="list3[state.tabindex1].image" class="image" mode=""></image>
						<view class="right">
							<view class="title u-line-1" style="width: 430rpx;">
								{{item.title}}
							</view>
							<view class="subtitle u-line-1" style="width: 430rpx;">
								{{item.brief}}
							</view>
							<view class="botq">
								<view class="ll">
									浏览:{{item.pv}}人
								</view>
								<view class="price">
									<span>{{item.price}}</span>金币
								</view>
							</view>
						</view>
						
					</view>
				</view>

	<u-loadmore :status="state.pageData.status" font-size="26rpx" icon-size="36rpx" margin-top="30rpx" />
			</view>
		</view>
	</view>
</template>

<script setup>
	
	

	import {
		reactive,
		computed
	} from 'vue';
	import LC from '@/LC';
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'

	let state = reactive({
		data: {
			category:[]
		},
		pageData:{
			page: 1,
			limit:15,
			status: 'loading'
		},
		keyword:'',
		tabindex:0,
		tabindex1:0,
		numbernewdata:{},
		data1: [],
		datalist:[]
	})
	
	let list3=computed(()=>{
		if(state.data.category.length){
			return LC.$store('app').cpcategorylist[state.data.category[state.tabindex].id]
		}
		return []
		
	})

	onLoad(() => {


		// if (!LC.$store('user').isLogin) {
		// 	uni.reLaunch({
		// 		url: '/pages/auth/login'
		// 	})
		// }

		getmsg()
	})
	onShow(()=>{
		changetab({index:state.tabindex})
	})

	function openLInk(href) {
		// #ifdef APP-PLUS
		plus.runtime.openURL(href)
		// #endif
		// #ifdef H5
		LC.$router.go('/pages/index/webview', {

			url: encodeURI(href)

		})
		// #endif
		// #ifdef MP
		uni.setClipboardData({
			data: href,
			success: () => {
				uni.hideToast();
				this.$nextTick(() => {
					uni.$u.toast(this.mpTips);
				})
			}
		});
		// #endif

	}
	function numbernew(){
		LC.$api.home.numbernew({type:state.data.category[state.tabindex].id,keyword:state.keyword})
			.then(({
				res,
				data
			}) => {
		
		
				state.numbernewdata = data
				
			})
		
	}
	function search(){
		state.pageData = {
			page: 1,
			limit:15,
			status: 'loading'
		}
		state.datalist = []
			
			
		getlist()
	}
	function changetab({index}){
		state.tabindex=index
		state.tabindex1=0
	
		state.pageData = {
			page: 1,
			limit:15,
			status: 'loading'
		}
		state.datalist = []
			
			
		getlist()
		
	}
	function changetab1(index){
		state.tabindex1=index
		
	
		state.pageData = {
			page: 1,
			limit:15,
			status: 'loading'
		}
		state.datalist = []
			
			
		getlist()
		
	}

	function getmsg() {


		LC.$api.home.index()
			.then(({
				res,
				data
			}) => {

				
				state.data = data
				LC.$store('app').cpcategory=state.data.category
				// numbernew()
				getlist()
			})

	}
	
	
	
	onReachBottom(() => {
		onbottom()
	})
	
	
	
	function onbottom() {
	
		let {
			status,
			load,
			limit,
			page
		} = state.pageData
	
		if (status != 'nomore' && !load) {
	
			getlist()
	
	
		}
	}
	

	
	function getlist() {
	if(!list3.value.length){
		return 
	}
		LC.$api.home.articlelist({
				...state.pageData,
				type: list3.value[state.tabindex1].id,
				keyword:state.keyword
			})
			.then(({
				res,
				data
			}) => {
	
	
				state.datalist = [...state.datalist, ...data.data]
				
				if (data.data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}
	
	
				state.pageData.status = 'loadmore'
				state.pageData.page += 1
	
			})
	
	}
</script>

<style lang="scss">
	.wapper {
		padding: 0 30rpx;
	}
	.search{
		.left{
			font-size: 17px ;
			margin-right: 30rpx;
		    font-weight: 600 ;
		    color: #333 ;
		}
		    
	}

	.wzlist {
		.wzitem {
			margin-bottom: 40rpx;

			margin-top: 12rpx;
			min-height: 132rpx;
			background: #fff;
			
		
			display:flex;
			.image{
				width:236rpx;
				height:184rpx;
				border-radius: 5rpx;
				flex-shrink: 0;
				margin-right: 24rpx;
			}
			.right{
				flex:1;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
			.subtitle{
				margin-top: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #707070;
			}
			.botq{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 48rpx;
				.ll{
					    background-color: #FFF2E2;
					    border-radius:16rpx;
					    font-size: 22rpx;
					    font-weight: 400;
					    color: #FE9519;
					    height: 36rpx;
					    padding: 0 20rpx;
				}
				.price{
					
					font-size: 36rpx;
					color: #FC5652;
					line-height: 42rpx;
					       
					
				}
			}
		

	}
	
	}

	.tablist {
		padding: 20rpx 0;

		.tab {
			height: 54rpx;
			background: rgba(46, 54, 68, .1);
			border-radius: 28rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
			font-weight: 400;
			color: #0e3767;

			text-align: center;
			line-height: 54rpx;
			padding: 0 20rpx;

			&.active {
				background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
				color: #fff;
			}
		}

	}

	.kjh {
		padding: 0 30rpx;
		background: linear-gradient(90deg, #016eed, #00aef7 99%);
		border-radius: 0px 0px 7rpx 7rpx;
		color: #fff;
		height: 120rpx;

		.left {
			.top {
				font-size: 28rpx;
			}

			.bot {
				margin-top: 10rpx;
				font-size: 22rpx;
			}
		}

		.right {
			margin-left: auto;

			.hmlist {
				display: flex;

				.item {
					width: 50rpx;
					margin-left: 30rpx;
					height: 50rpx;
					background-image: url(/static/hmbg.png);
					background-size: 100% 100%;
					text-align: center;
					line-height: 50rpx;
				}
			}

		}

	}

	.top-icon {
		.logo {
			width: 92rpx;
			height: 75rpx;
		}

		.downalnd {

			width: 94px;
			height: 27px;
			background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);;
			border-radius: 13px;
			font-size: 12px;
			font-weight: 400;
			color: #fff;
			margin-top: 5px;
			line-height: 27px;
		}
	}
</style>